<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易</title>
</head>
<style type="text/css">
    * {
        padding: 0px;
        margin: 0px;
    }

    main {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 800px;
        height: 800px;
        background: url("./images/背景图.gif") repeat-x;
    }

    main section {
        width: 500px;
        height: 700px;
        border: 1px solid red;
        background: white;
    }

    main section .header img {
        padding: 0px;
        margin: 0px;
        width: 100%;
    }

    main section div.mail, div.game, div.face {
        border-bottom: 1px solid red;
        overflow: hidden;
    }

    .mail {
        width: 100%;
        height: 80px;
        background: url("./images/邮件.gif") no-repeat 20px 20px;
    }

    .mail p {
        margin-left: 80px;
        height: 80px;
        padding: 20px;

    }

    .mail p span{
        margin-right: 20px;
    }

    main section div.game, div.face {
        padding-bottom: 20px;
    }

    main section div:not([class="header"]) img {
        margin: 40px;
        display: block;
        float: left;
    }

    /*main section div span {*/
    /*    margin-right: 20px;*/
    /*    float: left;*/
    /*    display: block;*/
    /*    margin-top: 40px;*/
    /*}*/
</style>
<body>
<main>
    <section>
        <div class="header">
            <img src="images/标题.gif">
        </div>
        <div class="mail">
            <p>
                <span>免费邮</span><span>VIP邮箱</span><span>企业邮</span><span>邮箱大师</span>
            </p>
        </div>
        <div class="game">
            <img src="./images/鼠标.png" title="game">
            <span>梦幻西游</span><span>新大话</span><span>藏地传奇</span><span>魔兽世界</span><span>星际争霸</span><span>倩女幽魂</span><span>武魂</span><span>天下</span><span>新飞飞</span>
        </div>
        <div class="face">
            <img src="./images/笑脸.gif" title="smile">
            <span>考拉海购</span><span>LOFTER</span><span>博客</span><span>相册</span><span>花田交友</span><span>约会</span><span>女神</span><span>跟帖</span><span>CC语音</span><span>直播</span>
        </div>
        <div class="star">
            <img src="./images/星星.gif" title="star">
            <span>彩票</span><span>LOFTER</span><span>博客</span><span>相册</span><span>花田交友</span><span>约会</span><span>女神</span><span>跟帖</span><span>CC语音</span><span>直播</span>
        </div>
    </section>
</main>
</body>
</html>